
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10 col-xl-8">

            <div class="header mb-3 mt-5">
                <div class="header-body">
                    <div class="row align-items-center">
                        <div class="col">

                            <h6 class="header-pretitle">
                                AppSite
                            </h6>

                            <h1 class="header-title">
                                {i18n{ manager.Install }i18n}
                            </h1>

                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">

                    <div class="row align-items-center">
                        <div class="col">

                            <ul class="nav nav-tabs nav-overflow header-tabs">
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        {i18n{ manager.EnvCheck }i18n}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        {i18n{ manager.linkDB }i18n}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link active">
                                        {i18n{ manager.setConfig }i18n}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        {i18n{ manager.done }i18n}
                                    </a>
                                </li>
                            </ul>


                        </div>
                    </div>



                    <form class="my-4" method="post" action="?step=process" name="form">

                        <div class="row">
                            <div class="col-12 col-md-6 order-md-2">


                                <div class="card bg-light border ml-md-4">
                                    <div class="card-body">

                                        <p class="mb-2">
                                            {i18n{ manager.configComment }i18n}
                                        </p>

                                        <p class="text-gray-700 mb-2">
                                            {i18n{ manager.configIntroduce }i18n}
                                        </p>


                                        <div class="list-group list-group-flush mb-4">

                                            <div class="list-group-item">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <small>{i18n{ manager.configWriteable }i18n}</small>
                                                    </div>
                                                    <div class="col-auto">
                                                        [if[::canWrite::<span class="text-success">●</span> {i18n{ manager.writeable }i18n} ]if]
                                                        [not[::canWrite::<span class="text-danger">●</span> {i18n{ manager.notWriteable }i18n} ]not]
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="list-group-item">
                                                <div class="row align-items-center">
                                                    <div class="col">
                                                        <small>{i18n{ manager.redisStatus }i18n}</small>
                                                    </div>
                                                    <div class="col-auto">
                                                        [if[::RedisEnabled::<span class="text-success">●</span> {i18n{ manager.enabled }i18n}]if]
                                                        [not[::RedisEnabled::<span class="text-warning">●</span> {i18n{ manager.notEnabled }i18n}]not]
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                            <div class="col-12 col-md-6">

                                <input type="hidden" name="step" value="linkDB">


                                <div class="form-group">

                                    <label>
                                        {i18n{ manager.configSaveMode }i18n}
                                    </label>

                                    <select class="form-control mb-4" data-toggle="select" name="dbmode">
                                        <option value="database">{i18n{ manager.configWithDatabase }i18n}</option>
                                        <option value="file">{i18n{ manager.configWithFile }i18n}</option>
                                    </select>

                                </div>


                                <div class="form-group">

                                    <label>
                                        {i18n{ manager.siteURL }i18n}
                                    </label>

                                    <input type="text" class="form-control" name="siteurl" placeholder="https://appsite.cn/" required >

                                </div>


                                <div class="form-group">

                                    <label>
                                        {i18n{ manager.ServerIP }i18n}
                                    </label>

                                    <input type="text" class="form-control" name="serverip" placeholder="0.0.0.0">

                                </div>


                                [if[::RedisEnabled::
                                <div class="form-group">

                                    <label>
                                        {i18n{ manager.RedisIP }i18n}
                                    </label>

                                    <input type="text" class="form-control" name="redishost" placeholder="127.0.0.1">

                                </div>


                                <div class="form-group">

                                    <label>
                                        {i18n{ manager.RedisPort }i18n}
                                    </label>

                                    <input type="text" class="form-control" name="redisport" placeholder="6379" value="6379">

                                </div>

                                <div class="form-group">

                                    <label>
                                        {i18n{ manager.RedisDB }i18n}
                                    </label>

                                    <input type="text" class="form-control" name="redisDB" placeholder="1" value="1">

                                </div>
                                ]if]


                            </div>
                        </div>


                        <hr class="mt-4 mb-5">

                        <h1 class="header-title mb-3">
                            {i18n{ manager.createAdmin }i18n}
                        </h1>

                        <div class="row">
                            <div class="col-12 col-md-6 order-md-2">

                                <div class="card bg-light border ml-md-4">
                                    <div class="card-body">

                                        <p class="mb-2">
                                            {i18n{ manager.createAdminTips }i18n}
                                        </p>

                                        <p class="text-gray-700 mb-2">
                                            {i18n{ manager.createAdminIntroduce }i18n}
                                        </p>

                                    </div>
                                </div>

                            </div>
                            <div class="col-12 col-md-6">



                                <div class="form-group">

                                    <label>* {i18n{ manager.adminUsername }i18n}</label>

                                    <input type="text" class="form-control" required name="username">

                                </div>


                                <div class="form-group">

                                    <label>* {i18n{ manager.password }i18n}</label>

                                    <input type="password" class="form-control" required name="password">

                                </div>

                                <div class="form-group">

                                    <label class="mb-1">{i18n{ manager.emailAddress }i18n}</label>

                                    <input type="email" class="form-control" name="email">

                                </div>

                                <div class="form-group">

                                    <label class="mb-1">{i18n{ manager.mobileNumber }i18n}</label>

                                    <input type="tel" class="form-control" name="mobile">

                                </div>


                            </div>
                        </div>


                    </form>


                </div>


            </div>


            <button type="button" class="btn btn-lg btn-primary lift" onclick="document.form.submit();">
                {i18n{ manager.next }i18n}
            </button>

            <p class="mt-3 mb-5">
                <span class="fe fe-clock mr-2 text-secondary"></span>{i18n{ manager.processTimeTip }i18n}
            </p>

        </div>
    </div>

</div>